<template>
  <div class="table-container">
    <div class="table-header">{{ data.headerName }}</div>
    <div class="table-body">
      <div
        class="table-row"
        v-for="row in data.list"
        :key="row.label"
        :class="{ 'item-select': row.isSelect }"
      >
        <div class="table-label">{{ row.label }}</div>
        <div class="table-value">{{ row.value }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ITableData } from "@/stores/types";

defineOptions({
  name: "Table",
});

defineProps<{
  data: ITableData;
}>();
</script>

<style scoped lang="scss">
.table-container {
  display: flex;
  flex-direction: column;
}

.table-header {
  height: 30px;
  background-image: url("./img/header-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.table-body {
  flex: 1;
}

.table-row {
  display: flex;
  align-items: center;
  color: #fff;
  height: 30px;
  font-size: 12px;
  padding-left: 15px;
  padding-right: 15px;
}

.table-label {
  flex: 1;
}

.table-value {
  flex: 1;
}

.item-select {
  background-image: url("./img/select-item.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #1fc6ff;
}
</style>
